<template>
	<view class="popup-bind-wx">
		<uv-popup ref="popup" bgColor="none" zIndex="9999998" :closeOnClickOverlay="false">
			<view class="reminder">
				<view class="reminder-box">
					<view class="title">微信号填写</view>
					<view class="value">平台支持用户自行微信联系啦！请补充您的微信号，以便顾客能及时联系上您～</view>
					<input v-model="wx_band" class="uni-input" placeholder-class="placeholder-input" placeholder="填写微信号" />
					<view class="hint">近期平台将下线在线聊天功能，不填写微信号对方将无法联系您。</view>
					<button :disabled="!wx_band" class="btn-primary btn-default" @tap.stop.prevent="onSign">确认</button>
				</view>
				<image class="reminder-image" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/tc4.png" mode="widthFix"></image>
			</view>
		</uv-popup>
		<uv-toast ref="toast" zIndex="9999999"></uv-toast>
	</view>
</template>

<script>
	// import mp from "@/mixins/mp.js";
	import { mapState } from "vuex";
	const app = getApp();
	export default {
		// mixins: [mp],
		data() {
			return {
				wx_band: ''
			}
		},
		computed: {
			...mapState({
				showBindWx: state => state.showBindWx,
				isLogin: state => state.isLogin,
			})
		},
		watch: {
			showBindWx: {
				handler(val) {
					console.log('BindWxzjjj', val, app.globalData.isLogin, app.globalData.UserInfo);
					//监听到变化 去触发下一步操作
					if (!val && app.globalData.isLogin && app.globalData.UserInfo && app.globalData.UserInfo.settleState == 1 && !app.globalData.UserInfo.wechatNumber) {
						this.$nextTick(() => {
							this.open()
						})
					}
				},
				immediate: true
			},
		},
		created() {
			// this.$nextTick(() => {
			// 	this.open()
			// })
		},
		methods: {
			close() {
				this.$refs.popup.close();
			},
			open() {
				this.$refs.popup.open();
			},
			onSign() {
				if (!this.wx_band) {
					return false
				}
				let that = this;
				that.$refs.toast.show({
					type: 'loading',
				})
				app._post_form(
					"/client/index/update-wechat-number", that.wx_band,
					(result) => {
						this.$store.commit("changeBindWx", true);
						that.$refs.toast.hide()
						setTimeout(() => {
							that.$refs.toast.show({
								type: 'success',
								message: "绑定成功"
							})
							setTimeout(() => {
								that.$refs.toast.hide()
								that.close()
							}, 2000)
						}, 200)
					}, null, () => {
						that.$refs.toast.hide()
					}
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-bind-wx {

		.reminder {
			position: relative;
			box-sizing: border-box;
			padding-top: 110rpx;
			z-index: 3;

			.reminder-image {
				width: 220rpx;
				position: absolute;
				right: 23rpx;
				top: 0rpx;
				z-index: 2;
			}

			.close {
				width: 64rpx;
				height: 64rpx;
				background: #BFBFBF;
				border-radius: 50%;
				line-height: 64rpx;
				text-align: center;
				font-size: 40rpx;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 2;
			}
		}

		.reminder-box {
			width: 626rpx;
			box-sizing: border-box;
			padding: 114rpx 56rpx 70rpx;
			background: #FFFFFF;
			border-radius: 80rpx;
			position: relative;
			z-index: 2;

			&::before {
				content: "";
				border-radius: 80rpx;
				display: block;
				box-sizing: border-box;
				width: 100%;
				height: 200rpx;
				background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/tc-bg.png');
				background-size: 100% 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}

			.title {
				font-size: 40rpx;
				font-weight: 900;
				color: #282D2D;
				line-height: 56rpx;
				margin-bottom: 38rpx;
			}

			.value {
				font-size: 28rpx;
				font-weight: 400;
				color: #282D2D;
				line-height: 44rpx;
				margin-bottom: 30rpx;

				&.value2 {
					margin-top: -66rpx;
				}
			}

			.uni-input {
				padding: 19rpx 10rpx;
				border-radius: 20rpx;
				border: 1rpx solid #7B867F;
			}

			/deep/.placeholder-input {
				font-weight: 400;
				font-size: 26rpx;
				color: #999B9B;
				text-align: left;
			}

			.btn-primary {
				text-align: center;
				font-size: 26rpx;
				flex-shrink: 0;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 24rpx;
				// opacity: 0.7;

				&.wx-band {
					opacity: 1;
				}
			}

			button[disabled] {
				background-color: #7E7E7E;
				color: #FFFFFF;
			}

			.hint {
				font-weight: 400;
				font-size: 24rpx;
				color: #396DE8;
				line-height: 37rpx;
				text-align: left;
				margin-top: 14rpx;
			}
		}
	}
</style>